<template>
	<view class="installBox">
		<view class="installBox-header ff-color-000" :class="{ headerHeight: deviceType }" :style="tabberStyle">
			<view class="installBox-header-box">
				<view class="ff-flex ff-text-center installBox-header-box-title ff-font-13 ff-color-222">
					<view class="ff-margin-right-30">
						<view class="ff-margin-bottom-8 ff-font-16"><u-count-to :startVal="0" fontSize="16"
								:endVal="install.installNum.thisMonthNum"></u-count-to></view>
						<view class="ff-color-6D7B98">本月已安装</view>
					</view>
					<view>
						<view class="ff-margin-bottom-8 ff-font-16"><u-count-to :startVal="0" fontSize="16"
								:endVal="install.installNum.totalNum"></u-count-to></view>
						<view class="ff-color-6D7B98">累计安装</view>
					</view>
				</view>
			</view>
		</view>

		<u-sticky offset-top="0">
			<view class="installBox-header-tabs ff-bg-fff">
				<u-tabs :list="tabsList.tabsList" :scrollable="false" @change="changeTabs"
					:activeStyle="{ color: '#2954FD' }" lineColor="#2954FD"></u-tabs>
			</view>
			<view v-if="tabsIndex == 2" class="tabsAllBox ff-flex-around ff-bg-f5 ff-padding-bottom-5 ff-font-14">
				<view class="tabsAllBox-but">
					<picker mode="selector" :value="supplierBox.supplierIndex" :range-key="'systemName'"
						:range="supplierBox.supplierColumns" @change="confirmSupplier" @cancel="cancelSupplier">
						<view @click="typeSupplierClick" class="tabsAllBox-but-type ff-align-items">
							<view class="tabsAllBox-but-type-title">安装平台</view>
							<view class="tabsAllBox-but-type-icon"></view>
						</view>
					</picker>
				</view>
				<view class="tabsAllBox-but">
					<view class="tabsAllBox-but-type ff-align-items">
						<uni-data-picker placeholder="产品分类" popup-title="产品分类" v-model="classifyBox.classifyIndex"
							:clear-icon="false" :localdata="classifyBox.classifyColumns"
							:map="{ text: 'classifyName', value: 'id' }" @change="onchangeClassify"
							@popupclosed="popupClassifyclosed" @nodeclick="onnodeclick"></uni-data-picker>
						<view class="tabsAllBox-but-type-icon"></view>
					</view>
				</view>

				<view class="tabsAllBox-but">
					<picker mode="selector" :value="productBox.productIndex" :range="productBox.productNameList"
						@change="confirmProduct" @cancel="cancelProduct">
						<view @click="typeProductClick" class="tabsAllBox-but-type ff-align-items">
							<view class="tabsAllBox-but-type-title">产品</view>
							<view class="tabsAllBox-but-type-icon"></view>
						</view>
					</picker>
				</view>
			</view>
		</u-sticky>
		<image v-if="false" @click.stop="searchClick" class="searchIcon"
			src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/search.png" mode=""></image>
		<view class="installBox-content">
			<view v-if="installs.installList.length > 0" class="ff-margin-12 ff-padding-bottom-80">
				<view>
					<view v-for="(item, index) of installs.installList" @click="installClick(item)" :key="index"
						class="ff-bg-fff ff-padding-12 ff-margin-bottom-10">
						<view class="ff-flex ff-flex-between">
							<view class="ff-width-260">
								<view class="ff-color-999 ff-margin-bottom-8 ff-margin-left-4 ff-font-14">
									{{ item.installTime }}
								</view>
								<view class="ff-font-weight-600 ff-font-15 ff-margin-left-5 ff-line-height-1-1">
									{{ item.productName }}
								</view>
							</view>
							<view class="ff-font-13">
								<view v-if="item.deviceInstallProcess == 2" class="tips tips1">待调试</view>
								<view v-if="item.deviceInstallProcess == 3" class="tips tips2">调试成功</view>
								<view v-if="item.deviceInstallProcess == 4" class="tips tips3">调试失败</view>
								<view v-if="item.deviceInstallProcess == 1" class="tips tips4">草稿</view>
							</view>
						</view>
						<view class="installBox-content-box ff-margin-top-13 ff-font-14">
							<view class="ff-flex">
								<view class="ff-margin-right-10 ff-color-999">分类</view>
								<view class="">{{ item.classifyName }}</view>
							</view>
							<view class="ff-flex ff-margin-top-15">
								<view class="ff-margin-right-10 ff-color-999">平台</view>
								<view class="">{{ item.systemName }}</view>
							</view>
							<view class="ff-flex ff-margin-top-15">
								<view class="ff-margin-right-10 ff-color-999">终端编号</view>
								<view class="">{{ item.deviceImei }}</view>
							</view>
						</view>
					</view>
				</view>
				<u-divider v-if="installs.noData" lineColor="#909399" text="没有更多了"></u-divider>
			</view>
			<f-noData v-else :topStyle="topStyle" />
		</view>
		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'

	onShow(() => {
		console.log('1123')
	})
	const {
		proxy
	} = getCurrentInstance();
	let uToast = ref(null);
	let loading = ref(null);

	// 暂无数据的高度
	let topStyle = ref('33%');

	// 判断当前的机型系列操作
	let deviceType = ref(null);
	// 判断机型
	uni.getSystemInfo({
		success: res => {
			// console.log('所获取设备数据皆来自设备', res);
			if (res.osName == 'ios') {
				if (res.deviceModel == 'iPhone 6/7/8') {} else if (res.deviceModel ==
					'iPhone 6/7/8 Plus') {} else if (res.deviceModel == 'iPhone 5') {} else {
					deviceType.value = true;
				}
			}
		}
	});

	// 给标题类赋值
	let title = ref('华安智慧物联设备平台');
	// tabs赋值
	let tabsList = reactive({
		tabsList: [{
			name: '待完成'
		}, {
			name: '已完成'
		}, {
			name: '全部'
		}]
	});

	// 计算导航栏的高度
	let tabberStyle = computed(() => {
		return `top:${proxy.customBar}px;`;
	});
	let tabberStyle1 = computed(() => {
		return `margin-top:${proxy.customBar}px;`;
	});

	// 上拉加载
	let onReachBottomMethods = () => {
		if (!installs.noData) {
			installs.current++;
			getInstallList(); // 请求列表数据
		}
	};
	defineExpose({
		onReachBottomMethods
	});

	// 点击tabs触发
	let tabsIndex = ref(null);
	let changeTabs = e => {
		// console.log('当前点击的tabs的index', e.index);
		tabsIndex.value = e.index;
		installs.current = 1;
		// 状态，1-待完成，2-已完成，空-全部
		if (e.index == 0) {
			installs.deviceInstallStatus = 1;
			installs.thirdPartySystemId = '' // 安装平台ID
			installs.productId = '' // 产品ID
			installs.classifyId = '' // 产品分类ID
		} else if (e.index == 1) {
			installs.deviceInstallStatus = 2;
			installs.thirdPartySystemId = '' // 安装平台ID
			installs.productId = '' // 产品ID
			installs.classifyId = '' // 产品分类ID
		} else if (e.index == 2) {
			installs.deviceInstallStatus = '';
		}
		getInstallList(); // 请求列表数据
	};

	// 安装平台（安装平台）下拉系列操作
	let supplierBox = reactive({
		supplierState: false,
		supplierColumns: [],
		supplierName: '',
		supplierIndex: 0
	});
	let getSupplierList = async () => {
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({
			url: '/thirdPartySystem/thirdPartySystem/page',
			data: {
				size: 100,
				current: 1
			}
		});
		loading.value.closeLoading(); // 关闭loading
		// console.log('安装平台列表数据----', data.data);
		if (data.code == 200) {
			data.data.records.forEach(res => {
				if (res.systemStatus == 1) {
					supplierBox.supplierColumns.push({
						systemName: res.systemName,
						id: res.id
					});
				}
			});
			supplierBox.supplierColumns.unshift({
				systemName: '全部',
				id: ''
			});
			// console.log('安装平台列表数据----', supplierBox.supplierColumns);
		}
	};
	// 点击打开安装平台下拉
	let typeSupplierClick = () => {
		supplierBox.supplierState = true;
	};
	// 关闭安装平台弹窗
	let cancelSupplier = () => {
		supplierBox.supplierState = false;
	};
	// 确定安装平台弹窗
	let confirmSupplier = e => {
		// console.log('确定产品弹窗', e.detail);
		supplierBox.supplierIndex = e.detail.value;
		supplierBox.supplierName = supplierBox.supplierColumns[supplierBox.supplierIndex].systemName;
		supplierBox.supplierState = false;
		installs.thirdPartySystemId = supplierBox.supplierColumns[supplierBox.supplierIndex].id;
		installs.current = 1;
		getInstallList(); // 请求列表数据
	};

	// 产品分类下拉系列操作
	let classifyBox = reactive({
		classifyState: false,
		classifyColumns: [],
		classifyName: '',
		classifyNameList: [],
		classifyIndex: ''
	});
	let getClassifyList = async () => {
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({
			url: '/productClassify/productClassify/tree'
		});
		loading.value.closeLoading(); // 关闭loading
		// console.log('产品分类列表数据----', data.data);
		if (data.code == 200) {
			classifyBox.classifyColumns = data.data;
			classifyBox.classifyColumns.unshift({
				classifyName: '全部',
				id: ''
			});
		}
	};
	// 确定产品分类弹窗
	let onchangeClassify = e => {
		// console.log('确定产品分类', e.detail.value);
		installs.classifyId = e.detail.value[e.detail.value.length - 1].value;
		installs.current = 1;
		getInstallList(); // 请求列表数据
	};
	// 产品分类---关闭弹窗
	let popupClassifyclosed = () => {
		// classifyBox.classifyIndex = []
	}

	// 产品下拉系列操作
	let productBox = reactive({
		productState: false,
		productColumns: [],
		productName: '',
		productNameList: [],
		productIndex: 0
	});
	let getProductList = async () => {
		loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({
			url: '/productInfo/productInfo/page',
			data: {
				current: 1,
				size: 100
			}
		});
		loading.value.closeLoading(); // 关闭loading
		// console.log('产品列表数据----', data.data.records);
		if (data.code == 200) {
			data.data.records.forEach(res => {
				productBox.productNameList.push(res.productName);
				productBox.productColumns.push({
					label: res.productName,
					id: res.id
				});
			});
			productBox.productNameList.unshift('全部');
			productBox.productColumns.unshift({
				label: '全部',
				id: ''
			});
		}
	};
	// 点击打开产品下拉
	let typeProductClick = () => {
		productBox.productState = true;
	};
	// 关闭产品弹窗
	let cancelProduct = () => {
		productBox.productState = false;
	};
	// 确定产品弹窗
	let confirmProduct = e => {
		// console.log('确定产品弹窗', e.detail);
		productBox.productIndex = e.detail.value;
		productBox.productName = productBox.productNameList[productBox.productIndex];
		productBox.productState = false;
		installs.productId = productBox.productColumns[productBox.productIndex].id;
		installs.current = 1;
		getInstallList(); // 请求列表数据
	};

	// 搜索跳转
	let searchClick = () => {
		proxy.$pageJump.navigateTo('/pages/views/install/components/home/components/Search');
	};

	onShow(() => {
		getInstallNum(); // 请求安装数量统计
		getInstallList(); // 请求列表数据
		// getProductList(); // 获取产品列表数据
		// getSupplierList(); // 获取安装平台列表数据
		// getClassifyList(); // 获取产品分类的列表数据
	})

	onMounted(() => {
		getInstallNum(); // 请求安装数量统计
		getInstallList(); // 请求列表数据
		getProductList(); // 获取产品列表数据
		getSupplierList(); // 获取安装平台列表数据
		getClassifyList(); // 获取产品分类的列表数据
	});

	// 请求安装数量统计
	let install = reactive({
		installNum: {}
	});
	let getInstallNum = async () => {
		if (loading.value)
			loading.value.openLoading('加载中···'); // 打开loading
		const data = await proxy.$http.get({
			url: '/install/installNum'
		});
		if (loading.value)
			loading.value.closeLoading(); // 关闭loading
		// console.log('请求得到安装数量统计-----', data);
		if (data.code == 200) {
			install.installNum = data.data;
		}
	};

	// 跳转详情
	let installClick = item => {
		// deviceInstallProcess	状态，1-草稿，2-待调试，3-调试成功，4-调试失败
		if (item.deviceInstallProcess == 1) {
			proxy.$pageJump.navigateTo('/pages/views/install/components/addDevice/index?installId=' + item.id);
		} else {
			proxy.$pageJump.navigateTo('/pages/views/install/components/home/components/installDetails?installId=' +
				item
				.id);
		}
	};

	// 请求列表数据
	let installs = reactive({
		installList: [], // 列表数据
		noData: false, // 暂无更多
		current: 1, // 页码
		size: 5, // 数量
		deviceInstallStatus: 1, // 状态，1-待完成，2-已完成，空-全部
		thirdPartySystemId: '', // 安装平台ID
		productId: '', // 产品ID
		classifyId: '' // 产品分类ID
	});

	let getInstallList = async () => {
		if (loading.value)
			loading.value.openLoading('加载中···'); // 打开loading
		let params = {
			current: installs.current, // 页码
			size: installs.size, // 每页的数量
			deviceInstallStatus: installs.deviceInstallStatus, // 状态，1-待完成，2-已完成，空-全部
			thirdPartySystemId: installs.thirdPartySystemId, // 安装平台ID
			productId: installs.productId, // 产品ID
			classifyId: installs.classifyId // 产品分类ID
		};
		const data = await proxy.$http.get({
			url: '/install/install_page',
			data: params
		});
		// console.log('请求列表数据-----', data);
		if (loading.value)
			loading.value.closeLoading(); // 关闭loading
		if (data.code == 200) {
			const infoList = data.data.records;
			if (infoList.length == 0 && installs.current == 1) {
				// console.log('首次加载没数据');
				installs.noData = false;
				installs.installList = [];
			} else if (infoList.length < 5 && installs.current == 1) {
				// console.log('首次加载有数据，但小于5条');
				installs.noData = true;
				installs.installList = infoList;
			} else if (infoList.length !== 0 && installs.current == 1) {
				// console.log('首次加载有数据');
				installs.noData = false;
				installs.installList = infoList;
			} else if (infoList.length !== 0 && installs.current > 1) {
				// console.log('上拉加载更多数据');
				installs.noData = false;
				installs.installList = installs.installList.concat(infoList);
			} else if (infoList.length == 0 && installs.current > 1) {
				// console.log('上拉加载没有更多数据了');
				installs.noData = true;
			}
		} else {
			uToast.value.openuToastError(data.msg); // 打开loading
		}
	};
</script>

<style scoped lang="scss">
	.headerHeight {
		height: 30vh !important;
	}

	.installBox {
		&-header {
			background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/pageBg.png') no-repeat;
			background-size: 100%;
			// position: fixed;
			// left: 0;
			height: 36vh;
			width: 100%;
			z-index: 6;

			&-box {
				padding: 39rpx 20rpx;

				&-title {
					margin: 190rpx 0 0 50rpx;
				}
			}

			&-tabs {
				padding: 0 0 20rpx;
				margin-top: -70rpx;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				background: linear-gradient(#fff, #fff, #f7f7f7);
				/* 标准语法*/
				overflow: hidden;
			}
		}

		.searchIcon {
			position: fixed;
			right: 1%;
			bottom: 25%;
			z-index: 9;
			width: 120rpx;
			height: 120rpx;
		}

		&-content {
			.tips {
				padding: 14rpx;
				font-size: 24rpx;
				border-radius: 5rpx;
			}

			.tips1 {
				color: #3670f6;
				background-color: #d7e2fd;
			}

			.tips2 {
				color: #2aba48;
				background-color: #def4e3;
			}

			.tips3 {
				color: #ef5151;
				background-color: #fbdfdf;
			}

			.tips4 {
				color: #ea8e20;
				background-color: #fcead5;
			}

			&-box {
				background-color: #f5f7fb;
				padding: 30rpx 20rpx;
			}
		}

		.tabsAllBox {
			&-but {
				background-color: #f1f3fa;
				border-radius: 20rpx;
				padding: 16rpx 20rpx;

				&-type {
					&-icon {
						width: 0px;
						height: 0px;
						border: 10rpx solid transparent;
						border-top-color: black;
						margin: 10rpx 0 0 8rpx;
					}
				}
			}
		}
	}
</style>